<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/Public/js/three.min.js"></script>
    <script src="/Public/js/OrbitControls.js"></script>
    <title>Three.js 流体模拟</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        #container {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        #info {
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            color: white;
            z-index: 100;
            pointer-events: none;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }
        #controls {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 15px;
            border-radius: 8px;
            z-index: 100;
            max-width: 300px;
        }
        #controls h3 {
            margin-top: 0;
        }
        .control-group {
            margin-bottom: 10px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input[type="range"] {
            width: 100%;
        }
        button {
            background: #4CAF50;
            border: none;
            color: white;
            padding: 8px 16px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <div id="info">
        <h1>Three.js 流体模拟</h1>
        <p>使用鼠标拖动旋转视角，滚轮缩放</p>
    </div>
    <div id="controls">
        <h3>控制面板</h3>
        <div class="control-group">
            <label for="waveHeight">波浪高度: <span id="waveHeightValue">0.5</span></label>
            <input type="range" id="waveHeight" min="0.1" max="2.0" step="0.1" value="0.5">
        </div>
        <div class="control-group">
            <label for="waveSpeed">波浪速度: <span id="waveSpeedValue">1.0</span></label>
            <input type="range" id="waveSpeed" min="0.1" max="3.0" step="0.1" value="1.0">
        </div>
        <div class="control-group">
            <label for="waterColor">水体颜色</label>
            <input type="color" id="waterColor" value="#006994">
        </div>
        <div class="control-group">
            <button id="resetBtn">重置模拟</button>
            <button id="disturbBtn">制造扰动</button>
        </div>
    </div>

    <script>
        // 主程序
        let scene, camera, renderer;
        let water, clock;
        let waveHeight = 0.5;
        let waveSpeed = 1.0;
        let waterColor = 0x006994;
        
        // 初始化场景
        function init() {
            // 创建场景
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x87CEEB);
            
            // 创建相机
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(0, 5, 10);
            
            // 创建渲染器
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true;
            document.getElementById('container').appendChild(renderer.domElement);
            
            // 添加时钟
            clock = new THREE.Clock();
            
            // 添加光源
            const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
            scene.add(ambientLight);
            
            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
            directionalLight.position.set(10, 20, 5);
            directionalLight.castShadow = true;
            scene.add(directionalLight);
            
            // 创建水面
            createWater();
            
            // 添加环境物体
            // addEnvironment();
            
            // 添加轨道控制
            // const controls = new THREE.OrbitControls(camera, renderer.domElement);
            const controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;
            controls.dampingFactor = 0.05;
            
            // 添加窗口大小调整监听
            window.addEventListener('resize', onWindowResize);
            
            // 设置UI控制
            setupControls();
            
            // 开始动画循环
            animate();
        }
        
        // 创建水面
        function createWater() {
            const waterGeometry = new THREE.PlaneGeometry(20, 20, 128, 128);
            
            // 创建自定义着色器材质来模拟流体
            const waterMaterial = new THREE.ShaderMaterial({
                uniforms: {
                    time: { value: 0 },
                    waveHeight: { value: waveHeight },
                    waveSpeed: { value: waveSpeed },
                    waterColor: { value: new THREE.Color(waterColor) },
                    lightDirection: { value: new THREE.Vector3(0.5, 1, 0.5).normalize() }
                },
                vertexShader: `
                    uniform float time;
                    uniform float waveHeight;
                    uniform float waveSpeed;
                    
                    varying vec3 vNormal;
                    varying vec3 vViewPosition;
                    
                    void main() {
                        vec3 pos = position;
                        
                        // 使用多个正弦波叠加创建流体表面
                        float wave1 = sin(pos.x * 2.0 + time * waveSpeed) * cos(pos.y * 1.5 + time * waveSpeed * 0.7);
                        float wave2 = sin(pos.x * 3.0 + time * waveSpeed * 1.3) * cos(pos.y * 2.5 + time * waveSpeed * 0.9);
                        float wave3 = sin(pos.x * 5.0 + time * waveSpeed * 0.5) * cos(pos.y * 4.0 + time * waveSpeed * 1.1);
                        
                        pos.z += (wave1 * 0.4 + wave2 * 0.3 + wave3 * 0.3) * waveHeight;
                        
                        vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);
                        gl_Position = projectionMatrix * mvPosition;
                        
                        // 计算法线
                        float dx = cos(pos.x * 2.0 + time * waveSpeed) * sin(pos.y * 1.5 + time * waveSpeed * 0.7) * 2.0 * waveHeight;
                        float dy = sin(pos.x * 2.0 + time * waveSpeed) * cos(pos.y * 1.5 + time * waveSpeed * 0.7) * 1.5 * waveHeight;
                        vNormal = normalize(vec3(-dx, -dy, 1.0));
                        
                        vViewPosition = -mvPosition.xyz;
                    }
                `,
                fragmentShader: `
                    uniform vec3 waterColor;
                    uniform vec3 lightDirection;
                    
                    varying vec3 vNormal;
                    varying vec3 vViewPosition;
                    
                    void main() {
                        // 基础颜色
                        vec3 baseColor = waterColor;
                        
                        // 菲涅尔效应
                        vec3 viewDir = normalize(vViewPosition);
                        float fresnel = pow(1.0 - max(dot(vNormal, viewDir), 0.0), 3.0);
                        
                        // 镜面反射
                        vec3 reflectDir = reflect(-lightDirection, vNormal);
                        float spec = pow(max(dot(viewDir, reflectDir), 0.0), 64.0);
                        
                        // 组合颜色
                        vec3 color = mix(baseColor * 0.7, baseColor * 1.2, fresnel);
                        color += spec * vec3(0.8, 0.9, 1.0);
                        
                        gl_FragColor = vec4(color, 0.9);
                    }
                `,
                transparent: true
            });
            
            water = new THREE.Mesh(waterGeometry, waterMaterial);
            water.rotation.x = -Math.PI / 2;
            water.position.y = 0;
            water.receiveShadow = true;
            scene.add(water);
        }
        
        // 添加环境物体
        function addEnvironment() {
            // 添加地面
            const groundGeometry = new THREE.PlaneGeometry(30, 30);
            const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x3d8c40 });
            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
            ground.rotation.x = -Math.PI / 2;
            ground.position.y = -0.5;
            ground.receiveShadow = true;
            scene.add(ground);
            
            // 添加一些球体作为环境物体
            const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
            const sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xff6b6b });
            
            for (let i = 0; i < 5; i++) {
                const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
                sphere.position.set(
                    Math.random() * 15 - 7.5,
                    Math.random() * 2 + 0.5,
                    Math.random() * 15 - 7.5
                );
                sphere.castShadow = true;
                scene.add(sphere);
            }
            
            // 添加一些立方体
            const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
            const boxMaterial = new THREE.MeshLambertMaterial({ color: 0x4ecdc4 });
            
            for (let i = 0; i < 3; i++) {
                const box = new THREE.Mesh(boxGeometry, boxMaterial);
                box.position.set(
                    Math.random() * 10 - 5,
                    Math.random() * 1 + 0.5,
                    Math.random() * 10 - 5
                );
                box.castShadow = true;
                scene.add(box);
            }
        }
        
        // 设置UI控制
        function setupControls() {
            const waveHeightSlider = document.getElementById('waveHeight');
            const waveHeightValue = document.getElementById('waveHeightValue');
            const waveSpeedSlider = document.getElementById('waveSpeed');
            const waveSpeedValue = document.getElementById('waveSpeedValue');
            const waterColorPicker = document.getElementById('waterColor');
            const resetBtn = document.getElementById('resetBtn');
            const disturbBtn = document.getElementById('disturbBtn');
            
            waveHeightSlider.addEventListener('input', function() {
                waveHeight = parseFloat(this.value);
                waveHeightValue.textContent = waveHeight.toFixed(1);
            });
            
            waveSpeedSlider.addEventListener('input', function() {
                waveSpeed = parseFloat(this.value);
                waveSpeedValue.textContent = waveSpeed.toFixed(1);
            });
            
            waterColorPicker.addEventListener('input', function() {
                waterColor = this.value;
                water.material.uniforms.waterColor.value.set(waterColor);
            });
            
            resetBtn.addEventListener('click', function() {
                waveHeight = 0.5;
                waveSpeed = 1.0;
                waterColor = 0x006994;
                
                waveHeightSlider.value = waveHeight;
                waveHeightValue.textContent = waveHeight.toFixed(1);
                waveSpeedSlider.value = waveSpeed;
                waveSpeedValue.textContent = waveSpeed.toFixed(1);
                waterColorPicker.value = '#006994';
                
                water.material.uniforms.waterColor.value.set(waterColor);
            });
            
            disturbBtn.addEventListener('click', function() {
                // 临时增加波浪高度和速度来模拟扰动
                const originalHeight = waveHeight;
                const originalSpeed = waveSpeed;
                
                waveHeight = 1.5;
                waveSpeed = 2.0;
                
                setTimeout(() => {
                    waveHeight = originalHeight;
                    waveSpeed = originalSpeed;
                    
                    waveHeightSlider.value = waveHeight;
                    waveHeightValue.textContent = waveHeight.toFixed(1);
                    waveSpeedSlider.value = waveSpeed;
                    waveSpeedValue.textContent = waveSpeed.toFixed(1);
                }, 1000);
            });
        }
        
        // 窗口大小调整
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
        
        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            
            const delta = clock.getDelta();
            const time = clock.getElapsedTime();
            
            // 更新水面材质的时间uniform
            if (water && water.material) {
                water.material.uniforms.time.value = time;
                water.material.uniforms.waveHeight.value = waveHeight;
                water.material.uniforms.waveSpeed.value = waveSpeed;
            }
            
            // 更新渲染
            renderer.render(scene, camera);
        }
        
        // 启动应用
        init();
    </script>
</body>
</html>